<template>
  <view>
    <u-tabs
      name="cate_name"
      count="cate_count"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#007045"
    ></u-tabs>

    <view v-if="current == 0" class="collect_line">
      <!-- <view class="collect_container">
        <image
          class="collectImg"
          src="http://ww1.sinaimg.cn/large/005NUwyggy1gtmflrseccj608b08bglx02.jpg"
          mode="scaleToFill"
          lazy-load="false"
        >
        </image>
        <view class="collectDetail">
          <view class="title_line">  
            <view class="title">2021新款成人高端体检(男)</view>
          <view class="descrip">包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴</view>
          </view>
        
          <view class="price"><text>¥<text>1299.<text>00起<text></view>
        </view>
      </view> -->
      <view class="first_tab">
        <navigator class="goods_item" open-type="navigate">
          <!-- 左侧图片容器 -->
          <view class="goods_img_wrap">
            <image
              class=""
              src="https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"
              mode="widthFix"
              lazy-load
            ></image>
          </view>
          <!-- 右侧商品描述容器 -->
          <view class="goods_des">
            <view class="goods_name"
              >2021新款成人高端体检(男)包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴</view
            >
            <view class="price">¥1299</view>
          </view>
        </navigator>
      </view>
      <view class="first_tab">
        <navigator class="goods_item" open-type="navigate">
          <!-- 左侧图片容器 -->
          <view class="goods_img_wrap">
            <image
              class=""
              src="https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"
              mode="widthFix"
              lazy-load
            ></image>
          </view>
          <!-- 右侧商品描述容器 -->
          <view class="goods_des">
            <view class="goods_name"
              >2021新款成人高端体检(男)包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴</view
            >
            <view class="price">¥1299</view>
          </view>
        </navigator>
      </view>
    </view>
    <view v-if="current == 1">
      <view class="first_tab">
        <navigator class="goods_item" open-type="navigate">
          <!-- 左侧图片容器 -->
          <view class="goods_img_wrap">
            <image
              class=""
              src="https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"
              mode="widthFix"
              lazy-load
            ></image>
          </view>
          <!-- 右侧商品描述容器 -->
          <view class="goods_des">
            <view class="goods_name"
              >机构机构机构机构腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴</view
            >
            <view class="price">¥1299</view>
          </view>
        </navigator>
      </view>
      <view class="first_tab">
        <navigator class="goods_item" open-type="navigate">
          <!-- 左侧图片容器 -->
          <view class="goods_img_wrap">
            <image
              class=""
              src="https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"
              mode="widthFix"
              lazy-load
            ></image>
          </view>
          <!-- 右侧商品描述容器 -->
          <view class="goods_des">
            <view class="goods_name"
              >机构机构机构机构腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴包含血糖、胃部、幽门螺杆菌、甲状腺的点点滴滴点点滴滴</view
            >
            <view class="price">¥1299</view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          cate_name: "套餐收藏",
        },
        {
          cate_name: "机构收藏",
        },
      ],
      current: 0,
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="less" scoped>
.first_tab {
  .goods_item {
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .goods_img_wrap {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 70%;
      }
    }
    .goods_des {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      }
      .price {
        color: red;
        font-size: 32rpx;
      }
    }
  }
}
// .collect_line {
//   margin-top: 30rpx;
//   padding: 20rpx 50rpx;
//   // border: 1px solid #000;
//   height: 200rpx;

//   .collect_container {
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     .collectImg {
//       flex: 1;
//       width: 200rpx;
//       height: 200rpx;
//     }

//     .collectDetail {
//       flex: 2;
//       //        word-break: break-all;
//       // overflow : hidden;
//       // text-overflow: ellipsis;
//       // display: -webkit-box;
//       // -webkit-line-clamp: 2;
//       // -webkit-box-orient: vertical;

//       overflow: hidden;
//       white-space: nowrap;
//       text-overflow: ellipsis;
//       display: flex;
//       justify-content: space-between;
//       flex-direction: column;
//       // border: 1px solid #000;
//       height: 200rpx;
//       margin-left: 30rpx;
//       .title {
//       }

//       .descrip {
//       }

//       .price {
//       }
//     }
//   }
// }
</style>
